<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
            <searchForm 
              :formOptions="formOptions" 
              @onSearch="onSearch" 
              @onReset="onReset"
              v-show="showSearch" />
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                  <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
              </el-col>
              <el-col :span="1.5">
              </el-col>
              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <el-table 
              :data="tablelist" 
              @selection-change="handleSelectionChange"
              >
              <el-table-column label="场地" prop="houseName" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="地址" prop="floorNo" align="center" />
              <el-table-column label="是否空闲" prop="totalRoom" align="center" />
              <el-table-column label="使用人" prop="roleSort" align="center" />
              <el-table-column label="使用时间" prop="roleSort" align="center" />
              <el-table-column label="所属组织" prop="roleSort" align="center" />
              <el-table-column label="用途" prop="roleSort" align="center" />
              <el-table-column label="备注" prop="roleSort" align="center" />
              <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text"  @click="handleUpdate(scope.row)">修改</el-button>
                  <el-button size="mini" type="text"  @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
              @pagination="getList" />
        </el-col>
      </el-row>
      <Add ref="addRef"></Add>
    </div>
  </template>
  <script>
  import searchForm from "@/components/Search/searchForm.vue";
  import treeIndex from "@/components/tree/index.vue";
  import Add from "./moudles/site/addDlg.vue"
  export default {
    components: { 
      treeIndex,
      searchForm,
      Add
    },
    data() {
      return {
        deptOptions: [], 
        formOptions: [
            {
                label: "场地名称",
                prop: "name",
                element: "el-input",
                placeholder: "请输入场地名称",
            },
        ],
        showSearch: true,
        tablelist: [],
        total: 0,
        queryParams: {
          pageNum: 0,
          pageSize: 10,
          name: ''
        }
      };
    },
    watch: {
      
    },
    created() {
    },
    methods: {
      handleAdd () {
        this.$refs.addRef.open()
      },
      handleSelectionChange(val){
        console.log(val, 'val')
      },
      handleUpdate(){

      },
      handleDelete(){

      },
      getList () {

      },
      handleNodeClick(data) {
          console.log(data, "选中的值");
      },
      onSearch(val) {
          // 查询条件和分页数据合并
          const arr = Object.assign(this.queryParams, val);
          this.queryParams.pageNum = 1;
          this.getList();
      },
      // 重置
      onReset(data) {
          this.queryParams.pageNum = 1;
          const arr = Object.assign(this.queryParams, data);
          this.getList();
      },
    }
  };
  </script>
  <style scoped lang="scss">
  .head-container {
    overflow-x: scroll;
  }
  </style>